<script setup>
import { useI18n } from "vue-i18n";
import { ref } from "vue";
const { t } = useI18n();
import { useUserStore } from "@/store";
const { setToken } = useUserStore();
import { useRouter } from "simpleRouter";
const router = useRouter();

const list = ref([
  {
    label: "pages.uni-ui",
    link: "/useUniUi",
  },
  {
    label: "pages.uv-ui",
    link: "/useUvUi",
  },
  {
    label: "pages.icon",
    link: "/useIcon",
  },
  {
    label: "pages.storage",
    link: "/useStorage",
  },
  {
    label: "pages.unocss",
    link: "/useUnocss",
  },
  {
    label: "pages.request",
    link: "/useRequest",
  },
  {
    label: "pages.pinia",
    link: "/usePinia",
  },
  {
    label: "pages.uni-use",
    link: "/useUniUse",
  },
  // {
  //   label: "pages.platform-modifier",
  //   link: "/usePlatformModifier",
  // },
  {
    label: "pages.z-paging",
    link: "/useZPaging",
  },
  {
    label: "pages.i18n",
    link: "/useI18n",
  },
  // #ifndef MP
  {
    label: "pages.mock",
    link: "/useMock",
  },
  // #endif
]);

function handleRouter(item) {
  router.push({ path: item.link });
}

const logOut = () => {
  setToken(null);
  router.replaceAll({ path: "/login" });
};
</script>

<template>
  <view class="container">
    <s-nav-bar :back="false" />
    <scroll-view
      scroll-y
      class="container-main"
      flex
      flex-col
      flex-items-center
      flex-justify-center
    >
      <uni-list>
        <uni-list-item
          showArrow
          clickable
          v-for="(item, index) in list"
          :key="index"
          :title="t(item.label)"
          @click="handleRouter(item)"
        />
      </uni-list>
      <uv-button
        type="error"
        text="退出登录"
        customStyle="margin-top: 40px"
        @click="logOut"
      />
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.container-main {
  flex: 1;
  overflow-y: auto;
}
</style>
